<template>
    <view class="btn-container">
		<view class="confirm-btn" @click="confirm">{{confirmText}}</view>
		<view v-if="showDeleteFlag" class="delete-btn" @click="deleteBtn">{{deleteText}}</view>
	</view>
</template>

<script>
    export default {
		props: {
			confirmText: {
				type: String,
				default: '确定',
			},			
			deleteText: {
				type: String,
				default: '删除',
			},
			showDeleteFlag: {
				type: Boolean,
				default: true
			}
		},
        data() {
            return {
				selectColorIndex: 0,														// 测试使用，一开始选中的颜色
				isShowColor: false,															// 展示颜色选择组件
				bgcColor: this.themeYellowColor,
            }
        },
		methods: {
			/**
			 * 确定
			 */
			confirm(){
				this.$emit("confirm");
			},
			/**
			 * 删除
			 */
			deleteBtn(){
				this.$emit("deleteBtn");
			},
		},
		mounted() {
		},
    }
</script>

<style lang="scss">
	// 上面的 x 和 标题 
	.btn-container {
		margin-top: 20rpx;
		width: 100%;
		height: 200rpx;
		padding: 20rpx 0rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		
		.confirm-btn, .delete-btn{
			display: flex;
			justify-content: center;
			font-size: 35rpx;
			align-items: center;
			color: red;
			width: 70%;
			height: 50%;
		}
		
		// 确定按钮
		.confirm-btn {
			border-radius: 40rpx;
			background-color: $themeYellowColor;
			color: $themePurpleColor;
		}
	} 
</style>
